<template>
  <view class="three-list df fdr alc fww">
    <view
      @click.stop="jump(`/views/goods/goods_detail?id=${item.goods_id || item.order_goods_id}`)"
      v-for="(item, index) in list"
      :key="index"
      :class="list.length % 3 === 0 ? 'ok-item' : ''"
      class="item u-rela"
      wx:key="index"
    >
      <image class="pic" :src="item.goods_image"></image>
      <image v-if="url" class="label-icon" :src="url" mode="widthFix"></image>
      <view class="info">
        <view class="name u-line-2 lh-32 font-24">{{ item.goods_name }}</view>
        <view class="df fdr alc f24">
          <view class="price u-m-r-8 font-weight-500"> ￥{{ item.price }} </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default: () => [],
      },
      url: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        keyword: '',
      }
    },
  }
</script>

<style scoped lang="scss">
  .three-list {
    .item {
      width: calc((100% - 24px) / 3);
      margin-right: 12px;
      margin-bottom: 30rpx;
      background: rgba(255, 255, 255, 1);
      border-radius: 8rpx;
    }

    .item:nth-child(3n) {
      margin-right: 0;
    }

    .ok-item:nth-last-child(1),
    .ok-item:nth-last-child(2),
    .ok-item:nth-last-child(3) {
      margin-bottom: 0;
    }

    /* .item:last-child {
		  margin-bottom: 0;
		} */

    .pic {
      display: block;
      width: 100%;
      height: calc((100vw - 48px) / 3);
    }

    .info {
      padding: 14rpx 16rpx 22rpx;
    }

    .name {
      width: 186rpx;
      height: 66rpx;
      margin-bottom: 10rpx;
    }

    .price {
      color: var(--color);
    }
  }
</style>
